<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
	<link rel="stylesheet" th:href="@{/assets/css/login.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/vue.min.js}" charset="utf-8"></script>
</head>
<head th:include="common::common(title='登录')">
<body class="login-bg" style="height: 100vh">
    
    <div class="login" id="app">
        <div class="message" style="margin-bottom:10px;">{{solgan}}</div>
        <div id="darkbannerwrap" sth:if="${param.error}">
        	<div th:if="${session.SPRING_SECURITY_LAST_EXCEPTION}">
        		<span th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></span>
			</div>
        </div>
       	
        <form id="loginForm">
            <input  v-model="username" name="username" placeholder="账号"  type="text">
            <hr class="hr15">
            <input  v-model="password" name="password" placeholder="密码"  type="password">
            <hr class="hr15">
            <input value="登录" style="width:100%;" type="button" @click="login">
            <hr class="hr20" >
        </form>
        <form id="tokenForm" method="post" action="/home">
            <input type="hidden" name="token" v-model="token">
        </form>
    </div>
<!-- 底部结束 -->
</body>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" th:inline="javascript">
var vm = new Vue({
	el:'#app',
	data:{
		solgan:'SHOWCASE',
		username: '',
		password: '',
		error: false,
		errorMsg: '',
        token:''
	},
	beforeCreate: function(){
		if(self != top){
			top.location.href = self.location.href;
		}
        $.cookie('token', null, { path: '/'});
	},
	methods: {
		login: function (event) {
			var data = "username="+vm.username+"&password="+vm.password;
			if(!vm.username){
				vm.errorMsg="请输入用户名";
				return;
			}
			if(!vm.password){
				vm.errorMsg="请输入密码";
				return;
			}
            $.cookie('token', null, { path: '/'});
			console.log("headers delelte");
            var that = this;
			var url = (staticURL+'/login/dologin?'+data);
			// document.getElementById("loginForm").submit();
            $.ajax({url : url,
                type:"GET",
                success : function(json) {
                    console.log("success",json);
                },
                complete:function (xhr,data) {
                    if(xhr.getResponseHeader('token')){
                        var token = xhr.getResponseHeader('token');
                        console.log("token",token);
                        localStorage.setItem("token", token);
                        $.ajaxSetup({
                            headers : {
                                'token' : token
                            }
                        });
                        that.token = token;
                        window.location.href=staticURL+'/home'
                    }
                }
            });
		}
	}
});
</script>